<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="datare">
            <div class="ra">权限管理</div>
            <div class="toxian">权限设置</div>
            <el-form
              ref="form"
              :label-position="labelPosition"
              label-width="100px"
              style="margin-top: 20px;margin-left: 20px;"
            >
              <el-form-item label="角色名称：">
                <el-col :span="8">
                  <el-input size="small" v-model="value"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="权限：">
                <el-col>
                  <el-tree
                  :default-expanded-keys="[1]"
                    :data="datad"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    :props="defaultProps"
                  ></el-tree>
                </el-col>
              </el-form-item>
            </el-form>
            <el-button
              type="danger"
              @click="add()"
              size="small"
              style="display:block;margin:30px auto"
            >提交</el-button>
            <p style="font-size:17px;margin-left:30px">权限列表</p>
            <el-table
              :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}"
              :row-style="{height:'20px'}"
              :cell-style="{padding:'2px 0px'}"
              :data="tableData"
              border
              style="width: 873px;margin:15px auto"
            >
              <el-table-column prop="roleName" label="角色名称"></el-table-column>
              <el-table-column label="操作">
                <!-- 用slot-scope="scope" -->
                <template slot-scope="scope">
                  <el-button size="mini" @click="gaibian(scope.row)">修改权限</el-button>
                  <el-button size="mini" @click="del(scope.row)">删除角色</el-button>
                </template>
              </el-table-column>
            </el-table>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import {
  menu_list,
  add_role_and_menu,
  role_menu_list,
  update_role_menu,
  role_del
} from "@/apiUrl/busslogin";
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessF from "@/components/businessF";
import businessL from "@/components/businessL";
export default {
  components: {
    merchantHeader,
    Footer,
    businessF,
    businessL
  },
  data() {
    return {
      value: "",
      labelPosition: "right",
      tableData: null,
      // 树形结构
      datad: null,
      bol:1,//用于判断是修改还是添加 1为添加 0为修改
      roleId:"",
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  mounted() {
    this.shuju();
    this.tabselect()
  },
  methods: {
    shuju() {
      menu_list().then(res => {
        // console.log(res);
        this.datad = res.data.data;
      });
    },
    tabselect(){
      var datas = {
        businessId: this.$store.getters.businessId
      };
      role_menu_list(datas).then(res => {
        console.log(res);
        this.tableData = res.data.data;
      });
    },
    add() {
      // console.log(this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()))
      if(this.bol==1){
        var datas = {
        businessId: this.$store.getters.businessId,
        roleName: this.value,
        menuIds: this.$refs.tree
          .getCheckedKeys()
          .concat(this.$refs.tree.getHalfCheckedKeys())
      };
      add_role_and_menu(datas)
        .then(res => {
          // console.log(res);
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.tabselect();
        })
        .catch(err => {
          this.$message.error("添加失败");
        });
      }else{
        var dat={
          businessId:this.$store.getters.businessId,
          roleId:this.roleId,
          menuIds:this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()),
        }
        update_role_menu(dat).then(res=>{
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.bol=1; //变回添加
          this.tabselect();
        })
      }
      this.$refs.tree.setCheckedKeys([]);//清空树形菜单
      this.value = null;// 清空角色名称 
    },
    gaibian(ax){
      this.bol=0;
      this.$refs.tree.setCheckedKeys(ax.lowestMenuIds);;//把权限呈现在树形菜单上
      this.value=ax.roleName;
      this.roleId=ax.roleId;
    },
    del(ax){
      var datas={
        roleId:ax.roleId
      }
      role_del(datas).then(res=>{
        this.tabselect();
        this.$message({
          message: res.data.msg,
          type: "success"
        });
      })
    }
  }
};
</script>
<style scoped>
.datare /deep/ .el-tabs__nav {
  margin-left: 60px;
}
.datare /deep/ .el-tabs__item.is-active {
  color: #f06048;
}
.datare /deep/ .el-tabs__active-bar {
  color: #f06048;
}
.datare /deep/ .el-tabs__item:hover {
  color: #f06048;
}
.datare /deep/ .el-tabs__active-bar {
  background-color: #f06048;
}
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}
.datale .router-link-exact-active {
  color: #ff9381;
}
.datale a:hover {
  color: #ff9381;
}
.datale {
  /* width: 216px; */
  background-color: #ffffff;
  border-radius: 6px;
  /* height: 200px; */
}
.borebon {
  border-bottom: 12px solid #eee;
}
.borebon ul {
  display: inline-block;
  margin-left: 20px;
}
.borebon ul span {
  font-size: 24px;
  font-weight: 550;
  font-stretch: normal;
  line-height: 32px;
  letter-spacing: 0px;
  color: #313131;
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}
.borebon ul li {
  width: 146px;
  line-height: 34px;
  font-size: 15px;
}
.ontoi .datale .sonh_g li {
  width: 120px;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}

.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
  height: 43px;
  background-color: #f06048;
  box-shadow: 0px 4px 2px 0px rgba(70, 23, 15, 0.38);
  border-radius: 0px 0px 20px 20px;
}
.toxian {
  margin-top: 23px;
  font-size: 17px;
  text-indent: 62px;
  border-bottom: solid 1px rgb(220, 220, 220);
  padding: 10px 0px;
}
</style>